<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-11 01:02:02
=======
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:50:25
>>>>>>> 9412502b99b728a658dcbd89e9bfe2e3bf5302b5
-->
<template>
  <div ref="right2_container" id="container" style="height: 95%"></div>

</template>

<script>
import {Column} from '@antv/g2plot';

export default {
  data() {
    return {
      dataArr:[
          {
            name: '口罩',
            province: "8:00",
            number: 214,
          },{
            name: '口罩',
            province: '10:00',
            number: 443,
          },{
            name: '口罩',
            province: '12:00',
            number: 453,
          },{
            name: '口罩',
            province: '14:00',
            number: 642,
          },{
            name: '口罩',
            province: '16:00',
            number: 633,
          },{
            name: '口罩',
            province: '18:00',
            number: 445,
          },{
            name: '消毒液',
            province: "8:00",
            number: 114,
          },{
            name: '消毒液',
            province: '10:00',
            number: 243,
          },{
            name: '消毒液',
            province: '12:00',
            number: 343,
          },{
            name: '消毒液',
            province: '14:00',
            number: 642,
          },{
            name: '消毒液',
            province: '16:00',
            number: 533,
          },{
            name: '消毒液',
            province: '18:00',
            number: 345,
          },
          
      ]
    }
  },
  mounted() {
    this.initChart();
  },
  methods:{
    initChart(){
      const column = new Column(this.$refs.right2_container, {
        data: this.dataArr,
        isGroup: true,
        xField: 'province',
        yField: 'number',
        seriesField: 'name',
        xAxis: {
          label: {
            rotate:0,
            offset: 10,
          }
        },
        
        label: {
            // 可手动配置 label 数据标签位置
            position: 'middle', // 'top', 'middle', 'bottom'
            // 可配置附加的布局方法
            layout: [
              // 柱形图数据标签位置自动调整
              { type: 'interval-adjust-position' },
              // 数据标签防遮挡
             { type: 'interval-hide-overlap' },
              // 数据标签文颜色自动调整
              { type: 'adjust-color' },
            ],
          },
      });

      column.render();

    }
  }
}
</script>>